<template>
    <div>
        <p class="text-center">一级容器</p>
        <router-view></router-view>


        <div>
            <div class="flex_al_center" style="width: 320px;margin: 0 auto;"
                @mouseout="mouseout"
            >
                <div v-for="item in 5"
                     :key="item"
                     @mousemove="mousemove(item, $event)"
                     @click="setoverrating"
                >
                    <v-icon v-if="item - rating/2 == 0.5" size="64">mdi-star-half-full</v-icon>
                    <v-icon v-else-if="rating/2 < item" size="64">mdi-star-outline</v-icon>
                    <v-icon v-else size="64">mdi-star</v-icon>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        data () {
            return {
                rating: 1,
                overrating: 1
            }
        },
        methods: {
            setoverrating () {
                this.overrating = this.rating
            },
            mousemove (item, event) {
                if (event.offsetX > 32) {
                    this.rating = item * 2
                } else {
                    this.rating = item * 2 - 1
                }
            },
            mouseout () {
                this.rating = this.overrating
            }
        }
    }
</script>

<style scoped>

</style>
